<template>
	<view class="flex1 flex_c" style="height: 100%;width: 100%;">
		<scroll-view class="flex1 custom-page" scroll-y @scrolltolower="scrolltolower" refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh">
			<view class="flex_r item" v-for="(item,index) in 20">
				<view class="item-img-box">
					<view class="item-img" style="{overflow: hidden}">
						<view class="item-img_">
							<image class="img" src="/static/images/6.jpg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="flex1 item-infr">
					<view class="flex_r item-infr-top">
						<view class="flex1 flex_r fa_c item-infr-top-name">
							<view class="text_30">
								阿丹
							</view>
							<view class="item-infr-top-name-icon">
								<!-- 男 -->
								<!-- <image class="img" src="@/pages/m-pages/m-my/img/ic_boy.png" mode="aspectFill"></image> -->
								<!-- 女 -->
								<image class="img" src="@/pages/m-pages/m-my/img/ic_girl.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="icon_">
							<view class="item-infr-top-type">
							</view>
							<view class="text_22 color_">
								在线
							</view>
						</view>
					</view>
					<view class="flex_r area">
						<view class="text_22 area-item">
							北京市
						</view>
					</view>
					<view class="text_22 signature">
						个性签名签名个性签名签名
					</view>

					<view class="flex_r state">
						<view class="flex_c_c state-item">
							<view class="state-item-bc"></view>
							<view class="state-item-value">
								<text class="text_26 bold_">4.2</text><text class="text_18">分</text>
							</view>
							<view class="text_20">
								近期服务1人
							</view>
						</view>
						<view class="flex_c_c state-item">
							<view class="state-item-bc"></view>
							<view class="state-item-value">
								<text class="text_30">4.2</text><text class="text_18">分</text>
							</view>
							<view class="text_18">
								近期服务1人
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresherTriggered: false
			}
		},
		created() {
			console.log("创建1")
		},
		methods: {
			scrolltolower() {
				uni.showToast({
					title: '触底',
					duration: 1000
				});
			},

			refresherrefresh() {
				uni.showToast({
					title: '下拉',
					duration: 1000
				});
				this.refresherTriggered = true
				setTimeout(() => {
					this.refresherTriggered = false
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom-page {
		width: 100%;
		height: 0;

		.item {
			width: calc(100% - 40rpx);
			height: 230rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 20rpx auto;
			background-color: rgba(246, 246, 246, 0.6);

			.item-img-box {
				position: relative;
				width: 300rpx;
				height: 100%;
				overflow: hidden;

				.item-img {
					position: absolute;
					top: -12rpx;
					left: -50rpx;
					width: calc(100% + 20rpx);
					height: calc(100% + 20rpx);
					transform: rotate(5deg) skew(-5deg, -5deg);
					overflow: hidden !important;
					border-radius: 0 40rpx 40rpx 0;

					.item-img_ {
						position: absolute;
						top: 0;
						right: -40rpx;
						bottom: 0;
						width: calc(100% + 20rpx);
						height: calc(100% + 20rpx);
						overflow: hidden !important;
						transform:perspective(20rpx) rotate(-5deg) skew(5deg, 5deg);
						// transform: rotate(-5deg) skew(5deg, 5deg);
						// .item-img__ {
						// 	position: absolute;
						// 	top: 0;
						// 	left: 0;
						// 	right: 0;
						// 	bottom: 0;
						// 	// transform: perspective(20rpx) rotateX(-0.6deg);
						// 	transform:perspective(20rpx) rotate(-5deg) skew(5deg, 5deg);
						// }
					}

				}
			}


			.item-infr {
				box-sizing: border-box;
				padding: 10rpx;

				.item-infr-top {
					width: 100%;
					height: 46rpx;

					.item-infr-top-name {
						.item-infr-top-name-icon {
							width: 34rpx;
							height: 34rpx;
							margin-left: 20rpx;
						}
					}

					.item-infr-top-type {
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						margin-top: 4rpx;
						margin-right: 10rpx;
						background-color: #36f40b;
					}
				}

				.area {
					position: relative;
					left: -10rpx;
					width: 100%;
					margin: 6rpx 0;

					.area-item {
						box-sizing: border-box;
						padding: 0 6rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 6rpx;
						color: #dd2a7b;
						background-image: linear-gradient(to top, #fdd2a7, #feefd8);
					}
				}

				.signature {
					position: relative;
					left: -20rpx;
					height: 40rpx;
					color: #eecbab;
					margin-bottom: 6rpx;
				}

				.state {
					position: relative;
					left: -30rpx;
					width: 100%;

					.state-item {
						position: relative;
						width: 170rpx;
						box-sizing: border-box;
						padding: 4rpx 0 10rpx 0;
						margin-right: 20rpx;

						view {
							position: relative;
							z-index: 2;
							color: #9894b5;
						}

						.state-item-value {
							color: #000;
							height: 30rpx;
							margin-bottom: 4rpx;
							line-height: 30rpx;
						}

						.state-item-bc {
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							top: 0;
							transform: rotate(5deg) skew(-5deg, -5deg);
							background-color: #eeeff3;
							border-radius: 10rpx;
						}
					}

				}

			}
		}

	}
</style>